<script setup>
import api from '../api/userpet_api.js'
import { ref, onMounted } from 'vue';
import { ElIcon, ElTag, ElPopover, ElButton, ElTable, ElTableColumn, ElMessageBox, ElMessage } from 'element-plus';
import { Timer, Picture, Warning } from '@element-plus/icons-vue'; // 新增图标
import lodash from 'lodash'

//放大照片的定义
const previewSrcList = ref(['https://p2.ssl.qhimgs1.com/sdr/400__/t01478eb014b0c178b2.png']);

// 定义默认图片（无照片时显示）
const defaultImg = 'https://picsum.photos/100/100?grayscale'; // 灰度占位图
// 定义绑定的数据
// 表格中的数据
const tableData = ref([]); // 表格数据
const total = ref(0); // 总记录数
// 编辑弹窗可见性
const editWinVisible = ref(false);
// 新增弹窗可见性
const addWinVisible = ref(false);
// 查询的数据
const searchObj = ref({ // 查询条件
  current: 1,
  limit: 10,
  user_id: '',
  pet_photo:'',
  pet_id: '',
  pet_name: '',
  pet_sex:'',
  pet_age: '',
  pet_variety:'',
  pet_kind:'',
  state: '',
  pet_body:'',
  introduction: ''
})
// 编辑表单数据
const editObj = ref({
});
// 新增表单数据
const addObj = ref({// 新增表单数据
  user_id: '',
  pet_photo:'',
  pet_id: '',
  pet_name: '',
  pet_sex:'',
  pet_age: '',
  pet_variety:'',
  pet_kind:'',
  state: '',
  pet_body:'',
  introduction: '',
});

// 获取表格数据
const search = async () => {
  const result = await api.page(searchObj.value);
  tableData.value = result.data;
  total.value = result.count;
}

// 页面加载后初始化数据
onMounted(async () => {
  search();
})

//自定义方法
//图片上传是做什么
const handleUploadSuccess=(response,file)=>{
  console.log("-----------")
  console.log(response);
  console.log(file);
  editObj.value.pet_photo = response.data;//获取图片路径
}

// 新增下拉框选项数据，这里假设状态值与显示文本一致，也可自定义
const StateOptions = [
  { label: '已领养', value: '已领养' },
  { label: '已寄养', value: '已寄养' },
  { label: '无', value: '无' }
];

// 分页
const handleSizeChange=()=>{
  console.log(searchObj);
  search();
}
// 当前页码
const handleCurrentChange=()=>{
  console.log(searchObj);
  search();
}

// 执行查询
const handlerSearch = () => {
  searchObj.value.current = 1;
  search();
  console.log(searchObj);
}

// 编辑弹窗取消
const editCancel = () => {
  editObj.value = {};
  editWinVisible.value = false;
}

// 编辑提交
const editCommit = async () => {
  await api.edit(editObj.value);
  search();
  editWinVisible.value = false;
  ElMessage.success('修改成功');
}

// 编辑操作
const handleEdit = (index, row) => {
  editObj.value = lodash.clone(row);// 克隆行数据到编辑表单
  if(!editObj.value.state){
    editObj.value.state = '无';// 设置默认值
  }
  editWinVisible.value = true;
}

// 删除操作
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定要删除该行数据吗?',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(async () => {
        await api.del(row.number);// 删除数据
        search();// 重新查询
        ElMessage.success('删除成功');// 提示信息
      })
      .catch(() => {// 取消删除
        ElMessage.info('已取消删除');// 提示信息
      })
}

// 打开新增弹窗
const openAddDialog = () => {
  addObj.value = {}; // 清空新增表单
  addWinVisible.value = true;
}

// 新增提交
const addCommit = async () => {
  ElMessageBox.confirm(
      '确定要提交吗?',
      '提交提示',
      {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'info',
      }
  )
      .then(async () => {
        await api.add(addObj.value); // 提交新增表单数据
        addWinVisible.value = false;
        search();
        ElMessage.success('新增成功');
      })
      .catch(() => {
        ElMessage.info('已取消提交');
      })
};
</script>

<template>
<!--&lt;!&ndash;  滚动条&ndash;&gt;-->
<!--  <el-scrollbar>-->
<!--    <div class="scrollbar-flex-content">-->
<!--      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">-->
<!--        {{ item }}-->
<!--      </p>-->
<!--    </div>-->
<!--  </el-scrollbar>-->


  <!--   查询表单-->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px">
    <el-form-item label="用户编号">
      <el-input v-model="searchObj.user_id" placeholder="请输入用户编号" clearable />
    </el-form-item>
    <el-form-item label="宠物名">
      <el-input v-model="searchObj.pet_name" placeholder="请输入宠物名" clearable />
    </el-form-item>
    <el-form-item label="宠物编号">
      <el-input v-model="searchObj.pet_id" placeholder="请输入宠物编号" clearable />
    </el-form-item>
<!--    <el-form-item label="宠物性别">-->
<!--      <el-input v-model="searchObj.pet_sex" placeholder="请输入宠物性别" clearable />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="宠物年龄">-->
<!--      <el-input v-model="searchObj.pet_age" placeholder="请输入宠物年龄" clearable />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="宠物品种">-->
<!--      <el-input v-model="searchObj.pet_variety" placeholder="请输入宠物品种" clearable />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="宠物种类">-->
<!--      <el-input v-model="searchObj.pet_kind" placeholder="请输入宠物种类" clearable />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="宠物状态">-->
<!--      <el-input v-model="searchObj.state" placeholder="请输入宠物状态" clearable />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="宠物简介">-->
<!--      <el-input v-model="searchObj.introduction" placeholder="请输入宠物简介" clearable />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="宠物体格">-->
<!--      <el-input v-model="searchObj.pet_body" placeholder="请输入宠物体格" clearable />-->
<!--    </el-form-item>-->
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
<!--    <el-form-item>-->
<!--      <el-button type="primary" @click="openAddDialog">新增</el-button>-->
<!--    </el-form-item>-->
  </el-form>
<!-- -->
  <el-table :data="tableData" style="width: 100%" border>
     宠物照片列
       宠物照片列（修改为图片显示）
    <el-table-column label="宠物照片" width="160">
      <template #default="scope">
        <el-image
            :src="scope.row.pet_photo || defaultImg"
            fit="cover"
            style="width: 100px; height: 100px"
            :preview-src-list="[scope.row.pet_photo || defaultImg]"
            preview-teleported
            :z-index="9999"
        >
        <template #placeholder>
          <div class="image-placeholder">
            <el-icon><Picture /></el-icon>
            <span>无照片</span>
          </div>
        </template>
        <template #error>
          <div class="image-placeholder">
            <el-icon><Warning /></el-icon>
            <span>加载失败</span>
          </div>
        </template>
        </el-image>
      </template>
    </el-table-column>


    <!-- 宠物名称列 -->
    <el-table-column label="宠物名称" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>name: {{ scope.row.pet_name }}</div>
            <div>宠物宝宝的名称</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pet_name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 宠物编号列 -->
    <el-table-column label="宠物编号" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>pet_id: {{ scope.row.pet_id }}</div>
            <div>专属于宠物宝宝的身份证号</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pet_id }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 宠物性别列 -->
    <el-table-column label="宠物性别" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>pet_sex: {{ scope.row.pet_sex }}</div>
            <div>宠物宝宝的性别</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pet_sex }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 宠物年龄列 -->
    <el-table-column label="宠物年龄" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>pet_age: {{ scope.row.pet_age }}</div>
            <div>宠物宝宝的年龄</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pet_age }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 宠物种类列 -->
    <el-table-column label="宠物种类" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>pet_kind: {{ scope.row.pet_kind }}</div>
            <div>宠物宝宝的种类</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pet_kind }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 宠物品种列 -->
    <el-table-column label="宠物品种" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>pet_variety: {{ scope.row.pet_variety }}</div>
            <div>宠物宝宝的物品种</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pet_variety }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 宠物简介列 -->
    <el-table-column label="宠物简介" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>introduction: {{ scope.row.introduction }}</div>
            <div>宠物宝宝的简介</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.introduction }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <!-- 宠物体格列 -->
    <el-table-column label="宠物体格" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>pet_body: {{ scope.row.pet_body }}</div>
            <div>宠物宝宝的体格</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.pet_body }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <!-- 用户编号列 -->
    <el-table-column label="用户编号" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>user_id: {{ scope.row.user_id }}</div>
            <div>铲屎官的编号</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.user_id }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="宠物状态" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="200">
          <template #default>
            <div>user_id: {{ scope.row.state }}</div>
            <div>是领养还是寄养</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.state }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <!-- 操作列 -->
<!--    <el-table-column label="按钮" width="120">-->
<!--      <template #default="scope">-->
<!--        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">-->
<!--          修改-->
<!--        </el-button>-->
<!--        <el-button-->
<!--            size="small"-->
<!--            type="danger"-->
<!--            @click="handleDelete(scope.$index, scope.row)"-->
<!--        >-->
<!--          删除-->
<!--        </el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>
  <!--分页-->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[1,5,10,20,30,50]"
      :background="background"
      layout="total,sizes, prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!-- 编辑对话框（独立） -->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="editObj">
      <el-form-item label="用户名" :label-width="100">
        <el-input v-model="editObj.user_id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物编号" :label-width="100">
        <el-input v-model="editObj.pet_id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物名" :label-width="100">
        <el-input v-model="editObj.pet_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物性别" :label-width="100">
        <el-input v-model="editObj.pet_sex" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物年龄" :label-width="100">
        <el-input v-model.number="editObj.pet_age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物种类" :label-width="100">
        <el-input v-model="editObj.pet_kind" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物物品种" :label-width="100">
        <el-input v-model="editObj.pet_variety" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物简介" :label-width="100">
        <el-input v-model="editObj.introduction" autocomplete="off" />
      </el-form-item>
      <el-form-item label="宠物体格" :label-width="100">
        <el-input v-model="editObj.pet_body" autocomplete="off" />
      </el-form-item>
      <!-- 新增宠物照片输入框 -->
<!--      <el-form-item label="宠物照片" :label-width="100">-->
<!--        <el-input v-model="editObj.pet_photo" placeholder="请输入照片URL" />-->
<!--        <div class="image-preview">-->
<!--          <el-image-->
<!--              :src="editObj.pet_photo || defaultImg"-->
<!--              fit="cover"-->
<!--              style="width: 100px; height: 100px; margin-top: 10px"-->
<!--          />-->
<!--        </div>-->
<!--      </el-form-item>-->
<!--      新的宠物照片上传方式，老师讲的-->
      <el-form-item label="宠物照片" :label-width="100">
        <el-upload
            class="avatar-uploader"
            action="/api/upload/file"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
        >
<!--          <img  v-if="editObj.pet_photo" :src="editObj.pet_photo"  style="width:100px" />-->
          <img  :src="editObj.pet_photo?editObj.pet_photo:'src/assets/upload.png'"
                style="width: 100px; height: 100px; object-fit: cover"/>
<!--          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
        </el-upload>
      </el-form-item>
      <el-form-item label="宠物状态" :label-width="100">
        <el-select
            v-model="editObj.state"
            placeholder="请选择领养状态"
            clearable
        >
          <el-option
              v-for="item in StateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增对话框（独立） -->
  <el-dialog v-model="addWinVisible" title="新增领养信息" width="500">
    <el-form :model="addObj" label-width="100px">
      <el-form-item label="用户编号">
        <el-input v-model="addObj.user_id" placeholder="请输入用户编号" />
      </el-form-item>
      <el-form-item label="宠物编号">
        <el-input v-model="addObj.pet_id" placeholder="请输入宠物宝宝的编号" />
      </el-form-item>
      <el-form-item label="宠物名称">
        <el-input v-model="addObj.pet_name" placeholder="请输入宠物宝宝的名称" />
      </el-form-item>
      <el-form-item label="宠物性别">
        <el-input v-model="addObj.pet_sex" placeholder="请输入宠物宝宝的性别" />
      </el-form-item>
      <el-form-item label="宠物年龄">
        <el-input v-model="addObj.pet_age" placeholder="请输入宠物宝宝的年龄" />
      </el-form-item>
      <el-form-item label="宠物种类">
        <el-input v-model="addObj.pet_kind" placeholder="请输入宠物 种类" />
      </el-form-item>
      <el-form-item label="宠物物品种">
        <el-input v-model="addObj.pet_variety" placeholder="请输入宠物 品种" />
      </el-form-item>
      <el-form-item label="宠物简介">
        <el-input v-model="addObj.introduction" placeholder="请输入宠物 简介" />
      </el-form-item>
      <el-form-item label="宠物体格">
        <el-input v-model="addObj.pet_body" placeholder="请输入宠物 体格" />
      </el-form-item>
      <el-form-item label="宠物状态">
<!--        <el-input v-model="addObj.state" placeholder="请输入宠物 bubbles" />-->
        <el-select
            v-model="addObj.state"
            placeholder="请选择领养状态"
            clearable
        >
          <el-option
              v-for="item in StateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
<!--      &lt;!&ndash; 编辑宠物照片输入框 &ndash;&gt;-->
<!--      <el-form-item label="宠物照片">-->
<!--        <el-input v-model="addObj.pet_photo" placeholder="请输入照片URL" />-->
<!--        <div class="image-preview">-->
<!--          <el-image-->
<!--              :src="addObj.pet_photo || defaultImg"-->
<!--              fit="cover"-->
<!--              style="width: 100px; height: 100px; margin-top: 10px"-->
<!--          />-->
<!--        </div>-->
<!--      </el-form-item>-->
      <el-form-item label="宠物照片" :label-width="100">
        <el-upload
            class="avatar-uploader"
            action="/api/upload/file"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
        >
          <!--          <img  v-if="editObj.pet_photo" :src="editObj.pet_photo"  style="width:100px" />-->
          <img  :src="editObj.pet_photo?editObj.pet_photo:'src/assets/upload.png'"
                style="width: 100px; height: 100px; object-fit: cover"/>
          <!--          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
        </el-upload>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWinVisible = false">取消</el-button>
        <el-button type="primary" @click="addCommit">提交新增</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-table {
  --el-table-header-text-color: #333;
  --el-table-row-hover-bg-color: #f5f7fa;
  margin-top: 10px;
}

/* 图片占位符样式 */
.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
}

.image-placeholder el-icon {
  font-size: 20px;
  margin-bottom: 5px;
}


/* 编辑/新增中的图片预览样式 */
.image-preview {
  margin-top: 10px;
}
</style>

































